<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md" v-if="meta">
        <div class="col-xs-12 col-md-9">
          <div class="row q-col-gutter-sm">
            <div class="col-12 text-h6">{{ meta.title }}</div>
            <div class="col-12 text-caption text-grey">{{ formatDate(meta.time) }}</div>
            <div class="col-12 text-caption text-grey">
              <q-badge>
                <q-icon name="play_circle_filled"/>
                {{ meta.playCount }}
              </q-badge>
            </div>
            <div class="col-12">
              <q-video :src="`api/upload/video/${meta.vid}_${meta.video}`" :ratio="16/9"/>
            </div>
            <div class="col-12">
              <div class="row q-gutter-md">
                <q-btn flat
                       :disable="status.favoriteLoading"
                       :loading="status.favoriteLoading"
                       @click="onFavoriteEvent">
                  <template v-slot:default>
                    <q-icon class="q-mr-sm" name="thumb_up" :color="meta.favorite ? 'primary' : 'grey'"/>
                    {{ meta.favoriteCount }}
                  </template>
                  <template v-slot:loading>
                    <q-spinner/>
                  </template>
                </q-btn>
              </div>
            </div>
            <div class="col-12">
              <q-separator/>
            </div>
            <div class="col-12 text-caption">
              {{ meta.description }}
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-md-3">
          <div class="row q-gutter-md">
            <div class="col-12">
              <div class="row q-col-gutter-sm items-center">
                <div class="col-auto">
                  <q-avatar>
                    <img :src="'statics/img/avatar.jpg'"/>
                  </q-avatar>
                </div>
                <div class="col">
                  <div class="row col-gutter-sm">
                    <div class="col-12 text-body2">{{ meta.user.username }}</div>
                    <div class="col-12 text-caption text-grey">{{ meta.user.sign }}</div>
                    <div class="col-12">
                      <q-btn class="full-width"
                             :disable="status.followLoading"
                             :loading="status.followLoading"
                             :label="`${meta.user.followed ? 'Followed' : 'Follow'} ${meta.user.followerCount}`"
                             color="primary"
                             :icon="meta.user.followed ? 'favorite' : 'favorite_outline'"
                             dense
                             @click="onFollowEvent">
                        <template v-slot:loading>
                          <q-spinner/>
                        </template>
                      </q-btn>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12">
              <div class="row q-gutter-md">
                <div class="col-12 text-h6">Maybe you like...</div>
                <div class="col-12">
                  <div class="row q-gutter-sm">
                    <div/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
  import {format} from 'quasar';
  import {Account} from "src/lib/Account";
  import {Video} from "src/lib/Video";

  const {pad} = format;
  export default {
    name: "Video",
    data: function () {
      return {
        meta: null,
        status: {
          followLoading: false,
          favoriteLoading: false
        }
      };
    },
    methods: {
      formatDate(v) {
        let date = new Date(v);
        let dateStr =
          `${date.getFullYear()}-` +
          `${pad(date.getMonth() + 1, 2)}-` +
          `${pad(date.getDate(), 2)} ` +
          `${pad(date.getHours(), 2)}:` +
          `${pad(date.getMinutes(), 2)}:` +
          `${pad(date.getSeconds(), 2)}`;
        return dateStr;
      },
      async onFollowEvent() {
        this.status.followLoading = true;
        try {
          if (await Account.follow(this.meta.user.username, !this.meta.user.followed)) {
            this.meta.user.followed = !this.meta.user.followed;
            this.meta.user.followerCount += this.meta.user.followed ? 1 : -1;
          }
        } catch {
        }
        this.status.followLoading = false;
      },
      async onFavoriteEvent() {
        this.status.favoriteLoading = true;
        try {
          if (await Video.favorite(this.meta.vid, !this.meta.favorite)) {
            this.meta.favorite = !this.meta.favorite;
            this.meta.favoriteCount += this.meta.favorite ? 1 : -1;
          }
        } catch {
        }
        this.status.favoriteLoading = false;
      }
    },
    async mounted() {
      this.$q.loading.show();
      this.meta = await Video.info(this.$route.params.vid);
      this.$q.loading.hide();
    }
  }
</script>

<style scoped>

</style>
